<template>
	<view>
		<view style="padding: 30rpx 24rpx;">
			<view class="u-bg-fff u-r-20 u-p-20">
				<view class="u-f-32 u-bold">收货地址</view>
				<u-gap height="20rpx"></u-gap>
				<view class="u-flex">
					<image src="../../static/address.png" style="width: 44rpx;height: 44rpx;"></image>
					<view class="u-m-l-10 u-flex-1" v-if="address.area">
						<view class="u-f-30 u-m-b-8">
							{{address.area}} {{address.address}}
						</view>
						<view class="u-flex-y-center u-flex-between">
							<view class="u-f-28" style="color: #999;">
								{{address.username}} <text class="u-m-l-20">{{address.mobile}}</text>
							</view>
							<view class="label"
								@click="$u.route('/pages/member/address/address',{type:1,id:address.id})">
								修改地址
							</view>
						</view>
					</view>
					<view class="u-m-l-10 u-flex-1 u-flex-y-center u-flex-between" v-else>
						<view class="u-f-30 u-m-b-8">暂无收货地址，请创建</view>
						<view class="label" @click="$u.route('/pages/member/address/address',{type:1})">
							添加地址
						</view>
					</view>

				</view>
			</view>
			<u-gap height="20rpx"></u-gap>
			<view class="u-bg-fff u-r-20 u-p-20">
				<view class="u-f-32 u-bold">商品清单</view>
				<u-gap height="20rpx"></u-gap>
				<view class="u-flex">
					<image :src="info.image" style="width: 118rpx;height: 118rpx;border-radius: 20rpx;"></image>
					<view class="u-m-l-16">
						<view class="u-f-28 u-bold u-m-b-14">{{info.name}}</view>
						<view class="u-flex " style="color: #EA4D44;align-items: baseline;">
							<block v-if="info.score > 0">
								<view style="font-size: 46rpx;font-weight: bold;">{{info.score}}</view>
								<view class="u-f-24">积分</view>
								<view class="u-f-24">+</view>
							</block>
							
							<view style="font-size: 46rpx;font-weight: bold;">{{info.price}}</view>
							<view class="u-f-24">元</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="20rpx"></u-gap>
			<view class="u-bg-fff u-r-20 u-p-20">
				<view class="u-f-32 u-bold">价格明细</view>
				<u-gap height="32rpx"></u-gap>
				<view class="u-flex u-flex-between">
					<view class="u-f-28 u-c-333">商品总价</view>
					<view class="u-f-28" style="color:#EA4D44">￥{{info.price}}</view>
				</view>
				<u-gap height="47rpx"></u-gap>
				<view class="u-flex u-flex-between">
					<view class="u-f-28 u-c-333">消耗积分</view>
					<view class="u-f-28" style="color:#EA4D44">{{info.score||0}}</view>
				</view>
			</view>
			<u-gap height="20rpx"></u-gap>
			<view class="u-bg-fff u-r-20 u-p-20">
				<view class="u-f-32 u-bold">价格明细</view>
					<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=0">
					<view class="u-flex-y-center">
						<image src="../../static/p_wx.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">微信支付</view>
					</view>
					<image src="../../static/check.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod!=0"></image>
					<image src="../../static/checked.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod==0"></image>
				</view>
				<!-- #ifdef APP -->
				
				<view class="u-flex-y-center u-flex-between " @click="paymethod=1">
					<view class="u-flex-y-center">
						<image src="../../static/p_zfb.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">支付宝支付</view>
					</view>
					<image :src="paymethod!=1?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<u-gap height="150rpx"></u-gap>
		<view style="padding: 10rpx 30rpx;position: fixed;bottom: 0;width: 100%;background-color: #fff;" >
			<view class="appBtn" @click="submit">确认支付</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				id:0,
				number:1,
				paymethod:0,
				address:{}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.number = e.number
			this.getInfo()
		},
			
		methods: {
			async submit(){
				let res= await uni.$u.http.post('order/submit',{shop_id:this.id,address_id:this.address.id,number:this.number,paymethod:this.paymethod});
				
				let result = await uni.$u.http.post('Order/pay', {
					order_no: res.order_no,
					type: 1
				})
		
				uni.requestPayment({
					"provider": "wxpay",
					timeStamp: result.timeStamp,
					nonceStr: result.nonceStr,
					package: result.package,
					signType: result.signType,
					paySign: result.paySign,
					success(res2) {
						uni.hideLoading()
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						uni.switchTab({
							url:'/pages/member/member'
						})
					},
					fail(e) {
						uni.hideLoading()
						uni.showToast({
							title: '支付失败,请重新支付',
							icon: 'none'
						})
					}
				})
			},
			async getInfo(){
		
				let res= await uni.$u.http.post('shop/shopDetail',{id:this.id});
				this.info = res
				this.address = res.address
			},
		}
	}
</script>


<style>
	page {
		background: #F8F8FA;
	}
		.label {
			width: 136rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 1rpx solid #EA4D44;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #EA4D44;
			display: flex;
			align-items: center;
			justify-content: center;
		}
</style>